
<template>
  <div class="app">
    <topbar ref="child1"/>
    <div class="container" >

 <div class="Rp bg-ffffff" >

<!-- 统计条数 -->
<div class="hmenu">
<div class="left">搜索结果</div>
<div class="right">{{allNum}}条内容</div>
</div>
   <el-container v-loading="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)"></el-container>
<!-- 收藏循环开始 -->
<div class="one" v-for="(article,index) in articleInfo">
  <nuxt-link :to="'/article/?collkey='+ article.collkey">
    <div class="title" v-html="article.title"></div>
    <img v-if="article.poster.length > 0" v-bind:src="article.poster" alt="">
    <p v-html="article.content"></p>
  </nuxt-link>
              <!--<div class="info">-->
                <!--<span @click="" class="hand"> <i class="btn-sc0"></i>收藏</span>-->
                <!--<span class="btn-up zan hand" @click="zanup">赞同 {{article.agreeNum}} </span>-->
                <!--<span class=" btn-down zan hand" @click="zandown"> </span>-->
              <!--</div>-->
  <div class="zcinfo">
    <span>{{article.magezineName}} {{article.year}}年第{{article.issue}}期 栏目 | {{article.columns}} 文 <span v-show="article.author != null">| {{article.author}}</span></span>
    <span class="zan_down0" @click="zandown(article.collkey,1,index)" v-if="article.isDisagree==0"> </span>
    <span class="zan_down1" @click="zandown(article.collkey,0,index)" v-if="article.isDisagree==1"> </span>
    <span class="zan_up0" @click="zanup(article,1,index)" v-if="article.isAgree==0">赞同 {{article.agreeNum}} </span>
    <span class="zan_up1" @click="zanup(article,0,index)" v-if="article.isAgree==1">已赞同 {{article.agreeNum}} </span>
    <span class="cang0" @click="collect(article,1,index)" v-if="article.isCollect==0">{{article.likeNum}}</span>
    <span class="cang1" @click="collect(article,0,index)" v-if="article.isCollect==1">{{article.likeNum}}</span>
  </div>
</div>
   <center style="height:200px;margin-top:100px;" v-show="isShow">
     <img src="../assets/images/nosearch.png"/>
   </center>
<!-- 分页 -->
<div class="pagepart" v-show="allNum>0">
        <el-pagination
          @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="10"
          :total="totalNum">
          </el-pagination>
</div>

      </div>

 </div>

      <div class="gap100"></div>

<!--  <Bottombar/> -->
  </div>
</template>

<script>
import Topbar from '~/components/Topbar.vue'
import Bottombar from '~/components/Bottombar.vue'
import axios from 'axios'
import qs from 'qs'
export default {
  components: {
    Topbar,
    Bottombar,

  },
  data(){
    return{
      isShow:false,
      fullscreenLoading:true,
      loading:true,
      allNum:0,
      totalNum:1,
      currentPage:1,
      havedes:true,
      keyWord:'',
      startDoc:'0',
      articleInfo:'',
      user:'',
    }
  },
  mounted(){
    this.user=JSON.parse(localStorage.getItem("user"));
    //this.getSessionUser();
    this.getResult();

  },
  //监听路由，路由变化时执行，解决调到本页面不刷新的问题
  watch: {
    "$route": function(){
      this.getResult();
    }
  },
  methods:{
    getSessionUser(){

      let key=localStorage.getItem("user_unique_code");
      if(key!=null && key!="" && key!=undefined){
        console.log("key "+key)
        axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
        )
          .then((response)=>{
            console.log("resultuser "+response.data);
            let result= response.data;
            if(result.code==1){
              console.log(result.data.trim())
              this.user=JSON.parse(result.data.trim());
              console.info("usermsg "+this.user)
              // if(this.user!=null && this.user!="" && this.user!=undefined){
              //   // this.poster=this.user.poster;
              //   // console.log("uuaa  "+this.user.mobile)
              //   // this.isLogin=true;
              // }
              this.getResult();
            }else{
              // this.tipshow("用户不存在，请登录")
              this.getResult();
            }
          })
          .catch((error)=>{
            console.log(error)
          })
      }else{
        this.getResult();
      }


    },
    handleCurrentChange(val) {
      this.startDoc = val * 10;
      this.currentPage = val;
      this.getResult();
    },
    // collect(collkey,type,index){
    //   var vm = this;
    //   if(this.user!=null && this.user!="" && this.user!=undefined){
    //     axios.get('https://wenku.qikan.com:11000/article/collect?collkey='+collkey+"&userCode="+vm.user.unique_code+"&type="+type)
    //       .then(function(res){
    //         vm.articleInfo.list[index].isCollect = res.data.data.type;
    //         vm.articleInfo.list[index].likeNum = res.data.data.collectNum;
    //       })
    //   }else{
    //     alert("请先登录");
    //   }
    // },
    //
    // zanup(collkey,type,index){
    //   var vm = this;
    //   if(this.user!=null && this.user!="" && this.user!=undefined){
    //     axios.get('https://wenku.qikan.com:11000/article/agree?collkey='+collkey+"&userCode="+vm.user.unique_code+"&type="+type)
    //       .then(function(res){
    //         console.log(res.data.data);
    //         vm.articleInfo.list[index].isAgree = res.data.data.type;
    //         if(res.data.data.type = 1){
    //           vm.articleInfo.list[index].isDisagree = 0;
    //         }else{
    //           vm.articleInfo.list[index].isDisagree = 1;
    //         }
    //         // vm.articleInfo.list[index].isAgree = 0;
    //         vm.articleInfo.list[index].agreeNum = res.data.data.agreeNum;
    //       })
    //   }else{
    //     alert("请先登录");
    //   }
    // },
    //
    // zandown(collkey,type,index){
    //   var vm = this;
    //   if(this.user!=null && this.user!="" && this.user!=undefined){
    //     axios.get('https://wenku.qikan.com:11000/article/disagree?collkey='+collkey+"&userCode="+vm.user.unique_code+"&type="+type)
    //       .then(function(res){
    //         console.log(res.data.data);
    //         vm.articleInfo.list[index].isDisagree = res.data.data.type;
    //         if(res.data.data.type == 1){
    //           vm.articleInfo.list[index].isAgree = 0;
    //         }
    //         vm.articleInfo.list[index].agreeNum = res.data.data.agreeNum;
    //         // vm.articleInfo.list[index].isAgree = 0;
    //       })
    //   }else{
    //     alert("请先登录");
    //   }
    // },

    collect(rearticle,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        var original = rearticle.magezineName+rearticle.year+'年第'+rearticle.issue+'期';
        axios.get('https://wenku.qikan.com:11000/article/collect?collkey='+rearticle.collkey+"&userCode="+vm.user.unique_code+"&type="+type
          +'&author='+rearticle.author+'&title='+rearticle.title_other+'&original='+original)
          .then(function(res){
            vm.articleInfo[index].isCollect = res.data.data.type;
            vm.articleInfo[index].likeNum = res.data.data.collectNum;
          })
      }else{
        localStorage.setItem("key",vm.keyWord);
        var timestamp = Date.parse(new Date())
        localStorage.setItem("failuretime",timestamp+60000);
        localStorage.setItem("jumpurl","/search")
        this.$refs.child1.godenglu();
      }
    },

    zanup(rearticle,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        var original = rearticle.magezineName+rearticle.year+'年第'+rearticle.issue+'期';
        axios.get('https://wenku.qikan.com:11000/article/agree?collkey='+rearticle.collkey+"&userCode="+vm.user.unique_code+"&type="+type
          +'&author='+rearticle.author+'&title='+rearticle.title_other+'&original='+original)
          .then(function(res){
            console.log(res.data.data);
            vm.articleInfo[index].isAgree = res.data.data.type;
            if(res.data.data.type = 1){
              vm.articleInfo[index].isDisagree = 0;
            }else{
              vm.articleInfo[index].isDisagree = 1;
            }
            // vm.articleInfo.list[index].isAgree = 0;
            vm.articleInfo[index].agreeNum = res.data.data.agreeNum;
          })
      }else{
        localStorage.setItem("key",vm.keyWord);
        var timestamp = Date.parse(new Date())
        localStorage.setItem("failuretime",timestamp+60000);
        localStorage.setItem("jumpurl","/search")
        this.$refs.child1.godenglu();
      }
    },

    zandown(collkey,type,index){
      var vm = this;
      if(this.user!=null && this.user!="" && this.user!=undefined){
        axios.get('https://wenku.qikan.com:11000/article/disagree?collkey='+collkey+"&userCode="+vm.user.unique_code+"&type="+type)
          .then(function(res){
            console.log(res.data.data);
            vm.articleInfo[index].isDisagree = res.data.data.type;
            if(res.data.data.type == 1){
              vm.articleInfo[index].isAgree = 0;
            }
            vm.articleInfo[index].agreeNum = res.data.data.agreeNum;
            // vm.articleInfo.list[index].isAgree = 0;
          })
      }else{
        localStorage.setItem("key",vm.keyWord);
        var timestamp = Date.parse(new Date())
        localStorage.setItem("failuretime",timestamp+60000);
        localStorage.setItem("jumpurl","/search")
        this.$refs.child1.godenglu();
      }
    },
    getResult() {
      var vm = this;
      vm.fullscreenLoading = true;
      vm.keyWord = vm.$route.query.key;
      vm.$refs.child1.input5=vm.keyWord;
      var qs = require('qs');
      if(this.user!=null && this.user!="" && this.user!=undefined){
        axios.post('https://wenku.qikan.com:11000/article/search',qs.stringify({ 'keyword': vm.keyWord ,'startDoc':vm.startDoc,'userCode': vm.user.unique_code}))
          .then(function(res){
            console.log(res.data.data);
            if(res.data.code==2 || res.data.code==-1){
              vm.allNum = 0;
              vm.articleInfo = {};
              vm.isShow = true;
            }else{
              vm.allNum = res.data.data[0].allNum;
              vm.totalNum = res.data.data[0].allNum;
              vm.articleInfo = res.data.data;
              vm.changeColor(res.data.data);
              vm.isShow = false;
            }
            vm.fullscreenLoading = false;
          })
      }else{
        axios.post('https://wenku.qikan.com:11000/article/search',qs.stringify({ 'keyword': vm.keyWord ,'startDoc':vm.startDoc,'userCode': ""}))
          .then(function(res){
            console.log(res.data.data);
            if(res.data.code==2 || res.data.code==-1){
              vm.allNum = 0;
              vm.articleInfo = {};
              vm.isShow = true;
            }else{
              vm.allNum = res.data.data[0].allNum;
              vm.totalNum = res.data.data[0].allNum;
              vm.articleInfo = res.data.data;
              vm.changeColor(res.data.data);
              vm.isShow = false;
            }
            vm.fullscreenLoading = false;
          })
      }

    },
    changeColor (resultsList) {
      resultsList.map((item, index) => {
        // console.log('item', item)
        if (this.keyWord && this.keyWord.length > 0) {
          // 匹配关键字正则
          let replaceReg = new RegExp(this.keyWord, 'g')
          // 高亮替换v-html值
          let replaceString =
            '<span class="search-text">' + this.keyWord + '</span>'
          resultsList[index].content = item.content.replace(
            replaceReg,
            replaceString
          );
          resultsList[index].title = item.title.replace(
            replaceReg,
            replaceString
          )
        }
      })
      this.results = []
      this.results = resultsList
    },

    // getResult() {
    //   var vm = this;
    //   vm.fullscreenLoading = true;
    //   vm.keyWord = this.$route.query.key;
    //   var qs = require('qs');
    //   axios.post('https://wenku.qikan.com:11000/article/search',qs.stringify({ 'keyword': vm.keyWord ,'startDoc':vm.startDoc}))
    //     .then(function(res){
    //       vm.allNum = res.data.data[0].allNum;
    //       vm.totalNum = res.data.data[0].allNum;
    //       vm.articleInfo = res.data.data;
    //       vm.fullscreenLoading = false;
    //       vm.changeColor(res.data.data);
    //     })
    //   vm.loading = false;
    // },

  }
}
</script>

<style scoped>

  .menuDiv { overflow: hidden;width:270px; background: #fff; padding:0;}
  .menuDiv a {text-decoration: none; color: #225599;width: 270px; height: 36px; line-height: 36px; background:url('../assets/images/arrow-right-blue.png') 250px center no-repeat; background-size: 6px 13px;border-bottom: 1px solid #F0F2F7; font-size: 14px;}
  .menuDiv li, .menuDiv ul{padding: 0;margin:0;list-style: none; width: 270px; }
  .menuDiv > ul > li > ul {display: none;}
  .menuDiv > ul > li:hover ul {display: block;}
  .menuDiv > ul > li > a {display: block; padding-left:10px;}
  .menuDiv > ul > li > ul > li > a {display: block;padding-left:30px; }


  >>>.readmore{ display: inline-block;color: #175199 ;font-size: 14px;line-height: 24px; width: 70px;background: url('../assets/images/more-down-arrow.png') right center no-repeat; background-size: 12px 8px;}
.Rp{width: 850px; display:inline-block;float: left; margin-top:20px;}

.hmenu{border-bottom:1px solid #F0F2F7; width: 100%; height: 52px; clear: both; padding:0 15px;}
.hmenu .left{color:#225599; line-height: 50px; height: 50px; width: 64px; margin-right: 43px; display: inline-block; font-weight: 600; border-bottom:3px solid #0084FF;font-size: 16px;}
.hmenu .right{display: inline-block; float: right;background: #EFF6FA;border-radius: 3px; height: 30px; padding: 0 10px; line-height: 30px;
font-size: 14px;color: #678DC1;text-align: center;margin-top:10px;}

.one{ width: 100%; height: auto;  background-color: #fff; padding: 19px 30px 15px 15px;border-bottom: 3px solid #f2f5f7; }
  .one:hover{ box-shadow:0 0 25px 2px rgb(0,0,0,.2); -moz-box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.2); -pie-background:rgba(0,0,0,.2);
    -webkit-box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.2);transition: .3s;z-index: 99999}
.one .title{font-size: 18px;color: #1A1A1A; line-height: 20px; width: 100%; margin-bottom: 14px; clear: both; font-weight: 600;}
.one p{font-size: 14px;color: #1A1A1A;text-align: justify;line-height: 24px; max-height: 72px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.one img{ float: left; margin-right:18px; width: 178px; height: 105px;}

.info{ width: 100%;  text-align: right;font-size: 12px;color: #8590A6;margin-top: 10px; position: relative;}
.zan{ border-radius: 3px;  height: 25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:10px;}
.btn-up{ background:#E8F3FF url('../assets/images/zan-up.png') 6px 5px no-repeat; background-size: 8px 8px; }
.btn-down{ background:#E8F3FF url('../assets/images/zan-down.png') 6px 5px no-repeat; background-size: 8px 8px;}
.btn-sc1{width:16px; height: 16px; background: url('../assets/images/icon-shoucang1.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-sc0{ width:16px; height: 16px; background: url('../assets/images/icon-shoucang0.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-print{width:16px; height: 16px; background: url('../assets/images/icon-print.png'); background-size: 16px 16px; display: inline-block ;vertical-align: middle;margin-right:4px;margin-left:7px;}
.btn-share{width:18px; height: 16px; background: url('../assets/images/icon-share.png'); background-size: 18px 16px; display: inline-block ;vertical-align: middle; margin-right:4px; margin-left:7px;}


.share{ position: relative; }
.sharelevel{ width: 137px; height: 182px;text-align: left; position: absolute; z-index: 200;top: 32px; left: 0; background: #FCFCFC;border: 1px solid #F2F2F2;box-shadow: 0 2px 4px 0 rgba(181,181,181,0.50);border-radius: 2px; padding: 10px 15px; }
.sharelevel .list{ width: 100%; height: 40px; line-height: 40px; }

.icon-copy{width:20px; height: 20px; background: url('../assets/images/share-copy.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-qq{width:20px; height: 20px; background: url('../assets/images/share-qq.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-weibo{width:20px; height: 20px; background: url('../assets/images/share-weibo.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
.icon-weixin{width:20px; height: 20px; background: url('../assets/images/share-weixin.png'); background-size: 20px 20px; display: inline-block ;vertical-align: middle; margin-right:4px;}
>>>.search-text{color:#0B6CF4 !important;}

.pagepart{ width: 100%; height: 60px; margin: 40px 0;  text-align: center;}
.zhishibar{ height: 40px; width: 270px;background-image: linear-gradient(-180deg, #1C7DE1 0%, #1674D4 52%, #0866C2 98%, rgba(232,56,41,0.80) 100%);border: 1px solid #0D6EB8;box-shadow: inset 0 1px 0 0 #358BE5;font-size: 14px;
color: #FFFFFF; line-height: 40px; padding-left: 39px; position: relative; }
.zhishibar:after{content: ''; background:url('../assets/images/icon-menulist.png') left top no-repeat; background-size: 19px 14px; position: absolute;z-index: 3; left:10px; top:14px; width: 19px; height: 14px;}
  /*.zcinfo{ width: 100%;  text-align: right;font-size: 12px;margin-top: 10px; position: relative; height: 25px;}*/
  /*.zcinfo{ width: 100%;  text-align: left;font-size: 12px;margin-top: 10px; position: relative; height: 25px; color:#8590A6;}*/
  .zcinfo{ width: 100%;  text-align: left;font-size: 12px;margin-top: 10px; position: relative; height: 25px; color:#8590A6;}
  .zan_up0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#E8F3FF url('../assets/images/zan-up.png') 6px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}
  .zan_up1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 5px; padding-left:17px; margin-right:6px;display: inline-block;background:#0084ff url('../assets/images/zan-up1.png') 6px 8px no-repeat; background-size: 8px 8px; float: right; color:#fff;cursor:pointer;}
  .zan_down0{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#E8F3FF url('../assets/images/zan-down.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#0084ff;cursor:pointer;}
  .zan_down1{border-radius: 3px;  height:25px; line-height: 25px; padding: 0 10px; padding-left:17px; margin-right:10px;display: inline-block;background:#0084ff url('../assets/images/zan-down1.png') 10px 8px no-repeat; background-size: 8px 8px; float: right;color:#fff;cursor:pointer;}
  .cang0{  height: 25px;  line-height: 25px; background: url('../assets/images/icon-shoucang0.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#8590A6;cursor:pointer;}
  .cang1{  height: 25px; line-height: 25px;  background: url('../assets/images/icon-shoucang1.png') left center no-repeat; background-size: 14px 14px; display: inline-block ;margin-right:10px;margin-left:7px; float: right; padding-left: 20px;color:#0084ff;cursor:pointer;}
</style>
